<!--
数据：
- 登录数据
- 注册数据
-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录注册页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script th:src="@{/js/libs/webfontloader.min.js}"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}" href="../static/css/fonts.min.css">
</head>
<body class="landing-page">
<!-- Preloader 预先加载-->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预先加载-->

<!--背景-->
<div class="content-bg-wrap"></div>
<!--end 背景-->

<!--头部距离-->
<div class="header-spacer-small"></div>
<!--end头部距离-->

<div class="container">
    <div class="row display-flex">
        <div class="col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
			<!--欢迎话语-->
            <div class="landing-content">
                <h1>欢迎来到交友网站<br>Welcome to the Dating Site</h1>
                <p></p>
                <p>
                    在本交友网站中，您可以轻松与陌生人交流，与他们成为好友！您可以与他们一起玩乐！高品质交友，会员更省心。你将不会孤独!<br>
                    In this dating website, you can easily communicate with strangers and become friends with them! You can play with them!
                    Make friends with high quality, members are more relaxed. You will not be alone!
                </p>
				<!--end欢迎话语-->
            </div>
        </div>

        <div class="col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            <!-- 登录注册模块  -->
            <div class="registration-login-form">
                <!-- 选项卡 -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#regist" role="tab">
                            <svg class="olymp-register-icon">
                                <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-register-icon"
                                th:href="@{/svg-icons/sprites/icons.svg#olymp-register-icon}"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#login" role="tab">
                            <svg class="olymp-login-icon">
                                <use xlink:href="../static/svg-icons/sprites/icons.svg#oalymp-login-icon"
                                th:href="@{/svg-icons/sprites/icons.svg#olymp-login-icon}"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
				<!--end选项卡-->
                <!-- 选项卡对应面板 -->
                <div class="tab-content">
					<!--注册面板-->
                    <div class="tab-pane active" id="regist" role="tabpanel" data-mh="log-tab">
                        <div class="title h6">注册</div>
						<!--数据：注册数据-->
                        <form class="content">
                            <div class="row">
                                <div class="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group label-floating">
                                        <label class="control-label">设置昵称</label>
                                        <input class="form-control" type="text" required/>
                                    </div>
                                    <div class="form-group label-floating">
                                        <label class="control-label">设置密码</label>
                                        <input class="form-control" type="password" required/>
                                    </div>
                                    <button type="submit" class="btn btn-purple btn-lg full-width">完成注册</button>
                                </div>
                            </div>
                        </form>
						<!--end数据：注册数据-->
                    </div>
					<!--登录面板-->
                    <div class="tab-pane" id="login" role="tabpanel" data-mh="log-tab">
                        <div class="title h6">登录</div>
						<!--数据：登录数据-->
                        <form class="content" th:action="@{/user/doLogin}" method="post">
                            <div class="row">
                                <div class="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group label-floating">
                                        <label class="control-label">账号</label>
                                        <input name="account" class="form-control" placeholder="" type="text" required/>
                                    </div>
                                    <div class="form-group label-floating">
                                        <label class="control-label">密码</label>
                                        <input name="upwd" class="form-control" placeholder="" type="password" required/>
                                    </div>
                                    <button type="submit" href="#" class="btn btn-lg btn-primary full-width">登录</button>
                                </div>
                            </div>
                        </form>
						<!--end数据：登录数据-->
                    </div>
                </div>
            </div>
            <!-- ... end登录注册模块  -->
        </div>
    </div>
</div>

<!-- JS Scripts -->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"}></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>
</body>
</html>